<template>
<div class="activityUserList">
  <y-table
    ref="table"
    border
    :pagination='{
      total: 0,
      currentPage:1,
      pageSize: 5,
      position: "right",
      pageSizes: [5, 10, 30, 50],
      layout: "sizes,total,prev, pager, next,jumper"
    }'
    :immediate="false"
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="name" label="报名信息" align="center" header-align="center" width="170">
      <template v-slot="{row}">
        <div>姓名：{{row.userName || '无'}}</div>
        <div>电话：{{row.phone || '无'}}</div>
      </template>
    </el-table-column>
    <el-table-column slot="adoptedList" label="物品" align="center" header-align="center" class-name="adopted-cell">
      <template v-slot="{row}">
        <template v-if="row.adoptedInfoList && row.adoptedInfoList.length">
          <div class="adopted-item" v-for="item in row.adoptedInfoList" :key="item.id">
            <el-image
              style="height: 100px; width: 100px"
              fit="contain"
              :src="generateMediaUrl({ fileOpenUrl: item.avatarUrl })"
              :preview-src-list="row.adoptedInfoList.map(a => generateMediaUrl({ fileOpenUrl: a.avatarUrl }))">
            </el-image>
            <div>{{item.adoptedSn}}</div>
          </div>
        </template>
        <template v-else>
          未选择物品
        </template>
      </template>
    </el-table-column>
    <el-table-column slot="isCharge" label="报名状态" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <span class="y-warning" v-if="row.needCharge === '0' && row.isCharge === '1'">未缴费</span>
        <span class="y-success" v-else>已报名</span>
      </template>
    </el-table-column>
  </y-table>
</div>
</template>

<script>
export default {
  name: "activityUserList",
  inject: ['generateMediaUrl'],
  computed: {
    getDataWay() {
      return {
        dataType: 'url',
        data: this.$api.applet.activityUserPage,
        param: Object.assign({}, this.model)
      }
    },
  },
  data(){
    return{
      model:{

      },
      columns:[
        {
          label: '报名用户',
          prop: 'nickName',
          width: 100
        },{
          prop: 'name',
          template: true
        },{
          prop: 'adoptedList',
          template: true
        },{
          prop: 'isCharge',
          template: true
        }
      ]
    }
  },
  methods:{
    search(id){
      this.$refs['table'] && this.$refs['table'].loadData(Object.assign({
        id
      }, this.model));
    },
  }
}
</script>

<style scoped lang="less">
.activityUserList{
  margin-top: -20px;
  /deep/.adopted-cell{
    >.cell{
      white-space: nowrap;
      overflow-x: auto;
      text-overflow: unset;
      .adopted-item{
        display: inline-block;
        padding: 0 5px;
      }
    }
  }
}
</style>